<template>
  <div class="search">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="70"
          class="search-form"
        >
          <Form-item label="姓名" prop="name">
            <Input
              type="text"
              v-model="searchForm.name"
              placeholder="请输入姓名"
              :maxlength="10"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="接诊人" prop="patient">
            <Input
              type="text"
              v-model="searchForm.patient"
              placeholder="请输入接诊人"
              :maxlength="10"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="手机号" prop="mobile">
            <Input
              type="text"
              v-model="searchForm.mobile"
              placeholder="请输入手机号"
              :maxlength="11"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="场地名称" prop="yard">
            <Input
              type="text"
              v-model="searchForm.yard"
              placeholder="请输入场地名称"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="下单时间" prop="time">
            <DatePicker
              type="daterange"
              v-model="searchForm.time"
              placement="bottom-end"
              placeholder="选择咨询时间"
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="审核状态" prop="status">
            <Select
              v-model="searchForm.status"
              placeholder="请选择"
              clearable
              style="width: 200px"
            >
              <Option v-for="(item, k) in statusList" :key="k" :value="item.value">{{
                item.label
              }}</Option>
            </Select>
          </Form-item>
          <Button
            @click="handleSearch"
            class="search-btn"
            type="primary"
            icon="ios-search"
            >搜索</Button
          >
        </Form>
      </Row>
      <Table
        :loading="loading"
        border
        :columns="columns"
        class="mt_10"
        :data="data"
        ref="table"
      />
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.page"
          :total="total"
          :page-size="searchForm.rows"
          @on-change="changePage"
          @on-page-size-change="changerows"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        />
      </Row>
    </Card>

    <!-- 查看模态框 -->
    <Modal v-model="viewFlag" title="审核拒绝">
      <div class="modal-info">
        <Input
          v-model="remark"
          type="textarea"
          :rows="10"
          placeholder="请填写拒绝理由"
        />
      </div>
      <div slot="footer">
        <Button @click="viewFlag = false">取消</Button>
        <Button type="error" @click="refuse">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import * as API_withdrawal from "@/api/member.js";

export default {
  name: "withdrawal",
  data() {
    return {
      loading: false, // 加载状态
      viewFlag: false, // modal显隐控制
      searchForm: {
        // 请求参数
        page: 1,
        rows: 10,
        order: "desc",
        name: "",
        patient: "",
        mobile: "",
        yard: "",
        time: "",
        status: "",
      },
      columns: [
        { title: "姓名", key: "username", minWidth: 120, tooltip: true },
        { title: "身份证号", key: "idcard", minWidth: 180, tooltip: true },
        { title: "手机号", key: "mobile", minWidth: 150, tooltip: true },
        { title: "银行卡号", key: "idcard", minWidth: 300, tooltip: true },
        { title: "开户行名称", key: "idcard", minWidth: 300, tooltip: true },
        { title: "申请提现金额（元）", key: "idcard", minWidth: 300, tooltip: true },
        { title: "申请时间", minWidth: 180, key: "status", tooltip: true },
        {
          title: "审核状态",
          minWidth: 130,
          render: (h, params) => {
            let label = "待审核";
            if (params.row.status == 1) label = "通过";
            if (params.row.status == 2) label = "不通过";
            return h("div", [
              h(
                "span",
                { style: { color: params.row.status == 0 ? "#FF5C58" : "#555555" } },
                label
              ),
            ]);
          },
        },
        {
          title: "操作",
          align: "center",
          width: 200,
          fixed: "right",
          render: (h, params) => {
            let func = [];
            func.push(this.btnDom(h, "success", "通过", "approved", params));
            func.push(this.btnDom(h, "error", "拒绝", "handleView", params, true));
            return h(
              "div",
              {
                style: { display: "flex", justifyContent: "center" },
              },
              func
            );
          },
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      selectMember: [], //保存选中的用户
      remark: {}, //拒绝理由
    };
  },
  methods: {
    // 分页 改变页码
    changePage(v) {
      this.searchForm.page = v;
      this.getData();
    },
    // 分页 改变页数
    changerows(v) {
      this.searchForm.rows = v;
      this.searchForm.page = 1;
      this.getData();
    },
    // 搜索
    handleSearch() {
      this.searchForm.page = 1;
      this.searchForm.rows = 10;
      this.getData();
    },
    // 按钮
    btnDom(h, type = null, label = "", method, params, ghost = false) {
      return h(
        "Button",
        {
          props: { type, size: "small", ghost },
          style: { marginRight: "5px" },
          on: {
            click: () => {
              this[method](params.row);
            },
          },
        },
        label
      );
    },
    // 审核通过
    approved(v) {
      this.$Modal.confirm({
        title: "确认通过",
        content: "<p>您确认要审核通过？</p>",
        onOk: () => {
          let params = {
            id: v.id,
          };
          API_withdrawal.updateMemberStatus(params).then((res) => {
            if (res.success) {
              this.$Message.success("已通过");
              this.getData();
            }
          });
        },
      });
    },
    // 打开审核拒绝弹窗
    handleView(v) {
      this.viewFlag = true;
      this.remark = "";
      this.viewDetail = v;
    },
    //审核拒绝
    refuse() {
      let params = {
        id: v.id,
        remark: this.remark,
      };
      API_withdrawal.updateMemberStatus(params).then((res) => {
        if (res.success) {
          this.$Message.success("已拒绝");
          this.getData();
        }
      });
    },
    //查询人员列表
    getData() {
      this.loading = true;
      API_withdrawal.getMemberListData(this.searchForm)
        .then((res) => {
          if (res.success) {
            this.data = res.result.records;
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ivu-table-wrapper {
  width: 100%;
}
::v-deep .ivu-card {
  width: 100%;
}
.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.modal-info {
  height: 600px;
  overflow-y: auto;
}
</style>
